<template>
  <div class="beijing" style="background-color: black">
    <div class="yuemian">
      <div class="kj">
        <!-- <img style="width:30px;higth:20px" src="../components/img/ll.jpg" alt=""> -->
        <van-tabs id="diy-tab" v-model="activeName">
          <!-- 登录 -->
          <div class="mama">
            <van-tab title="登录" name="a">
              <div class="a">
                <div class="bian">
                  <input
                    v-model="uname"
                    type="text"
                    placeholder="用户名"
                    name="用户名"
                  />
                </div>
                <div class="bian">
                  <input
                    v-model="upwd"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                  />
                  <button class="btn" @click="login">登录</button>
                  <!-- <img style="width:30px;higth:20px" src="../components/img/ll.jpg" alt=""> -->
                </div>
                <!-- <img style="width:30px;higth:20px" src="../components/img/ll.jpg" alt="">
              <img style="width:30px;higth:20px" src="../components/img/yt.jpg" alt="">
              <img class="a1" style="width:30px;higth:20px" src="../components/img/yt.jpg" alt="">
              <img class="a2" style="width:30px;higth:20px" src="../components/img/yt.jpg" alt=""> -->
              </div>
            </van-tab>
          </div>

          <!-- 注册 -->
          <van-tab title="注册" name="b">
            <div class="b">
              <div class="bian">
                <input
                  v-model="uphone"
                  type="phone"
                  placeholder="手机号"
                  name="手机号"
                />
              </div>
              <div class="bian yz">
                <input
                  style="width: 130px"
                  type="text"
                  placeholder="验证码"
                  name="密码"
                />
                <button>验证码</button><br />
                <button class="btn">快速注册</button>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "a",
      uname: "",
      upwd: "",
      uphone: "",
    }
  },
  methods: {
    login() {
      if (!this.uname || !this.upwd) {
        this.$toast.fail("用户名和密码都不能为空呀！")
      } else if (!/^\w{3,20}$/.test(this.uname)) {
        this.$toast.fail("用户名格式不正确哦~")
      } else {
        this.axios
          .post("/user/login", `uname=${this.uname}&upwd=${this.upwd}`)
          .then(res => {
            // console.log(this.uname, this.upwd)
            console.log(res)
            // 验证返回值中的code
            if (res.data.code == 201) {
              this.$store.commit("loginOK", this.uname)
              sessionStorage.setItem("islogin", true)
              sessionStorage.setItem("name", this.uname)
              this.axios.post("/user/uid", `uname=${this.uname}`).then(res => {
                console.log(res)
                if (res.data.code == 203) {
                  sessionStorage.setItem("uid", res.data.result[0].uid)
                  console.log(res)
                }
              })
              // location.href = "/index"
              this.$router.push("/index")
            }
          })
      }
    },
    register() {},
  },
  // mounted() {
  //   console.log(this.activeName)
  // },
}
</script>
<style>
.kj .van-tabs__nav--line {
  border-radius: 20px;

  background-color: rgba(0, 0, 0, 0.3);
}
.kj {
  background-color: rgba(255, 255, 255, 0.3);
}
/* .a1{
  margin: 20px 25px 40px 20px;
} */
</style>

<style lang="scss" scoped>
.yuemian {
  width: 375px;
  height: 667px;
  background-image: url("/img/bj.jpg");
  background-size: 100% 100%;
  float: left;

  .kj {
    width: 300px;
    height: 300px;
    border-radius: 20px;
    background-color: rgb(55, 59, 58, 0.7) no-repeat;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    .bian {
      input {
        margin: 15px auto;
      }
      margin: auto;
      position: relative;
      top: 1.25rem;
      left: 2.8125rem;
      width: 285px;
    }
    .yz {
      button:first-child {
        width: 200px;
      }
    }
    .nav {
      text-align: center;
    }
    .btn {
      width: 203px;
      height: 40px;
      background-color: rgba(184, 226, 228, 0.5);
      // margin: 50px;
      border-radius: 20px;
      border: 1px solid white;
    }
  }
}
</style>
